'use client';

import { useState, useEffect } from 'react';
import { FamilyMember } from './types/family';
import PersonForm from './components/PersonForm';
import TreeView from './components/TreeView';
import TreeViewD3 from './components/TreeViewD3';
import ListView from './components/ListView';
import TableView from './components/TableView';
import ProfileView from './components/ProfileView';

type ViewType = 'tree' | 'tree-d3' | 'list' | 'table' | 'form' | 'profile';

export default function Home() {
  const [familyData, setFamilyData] = useState<FamilyMember[]>([]);
  const [currentView, setCurrentView] = useState<ViewType>('table');

  // 从localStorage加载数据
  useEffect(() => {
    const savedData = localStorage.getItem('familyTreeData');
    if (savedData) {
      try {
        setFamilyData(JSON.parse(savedData));
      } catch (error) {
        console.error('Failed to parse saved data:', error);
      }
    }
  }, []);

  // 保存数据到localStorage
  const saveData = (data: FamilyMember[]) => {
    localStorage.setItem('familyTreeData', JSON.stringify(data));
    setFamilyData(data);
  };

  // 添加新成员
  const handleAddPerson = (personData: Omit<FamilyMember, 'id'>) => {
    const newPerson: FamilyMember = {
      ...personData,
      id: Date.now().toString(),
    };
    
    const updatedData = [...familyData, newPerson];
    saveData(updatedData);
    setCurrentView('tree-d3');
  };

  // 取消添加
  const handleCancelAdd = () => {
    setCurrentView('tree-d3');
  };

  const renderCurrentView = () => {
    switch (currentView) {
      case 'form':
        return (
          <PersonForm
            familyData={familyData}
            onSubmit={handleAddPerson}
            onCancel={handleCancelAdd}
          />
        );
      case 'profile':
        return <ProfileView familyData={familyData} onDataUpdate={saveData} />;
      case 'tree':
        return <TreeView familyData={familyData} />;
      case 'tree-d3':
        return <TreeViewD3 familyData={familyData} />;
      case 'list':
        return <ListView familyData={familyData} />;
      case 'table':
        return <TableView familyData={familyData} />;
      default:
        return <TreeViewD3 familyData={familyData} />;
    }
  };

  const getButtonClass = (view: ViewType) => {
    const baseClass = "px-4 py-2 rounded-lg font-medium transition-colors";
    const activeClass = "bg-primary text-white";
    const inactiveClass = "bg-white text-gray-700 border border-gray-300 hover:bg-gray-50";
    
    return `${baseClass} ${currentView === view ? activeClass : inactiveClass}`;
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 头部 */}
      <header className="bg-white shadow-sm border-b" role="banner">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-6">
            <h1 className="text-3xl font-bold text-secondary">
              族谱管理系统 - 在线家族族谱制作工具
            </h1>
            
            {/* 导航按钮 */}
            <nav className="flex flex-wrap gap-2" role="navigation" aria-label="主导航">
              <button
                onClick={() => setCurrentView('form')}
                className={getButtonClass('form')}
                aria-label="添加家族成员信息"
                title="添加新的家族成员到族谱中"
              >
                添加成员
              </button>
              <button
                onClick={() => setCurrentView('profile')}
                className={getButtonClass('profile')}
                aria-label="查看和编辑个人详细信息"
                title="管理家族成员的详细个人信息"
              >
                个人信息
              </button>
              
              {/* 树状图按钮 */}
              <button
                onClick={() => setCurrentView('tree-d3')}
                className={getButtonClass('tree-d3')}
                aria-label="查看家族关系树状图"
                title="D3树形布局 - 经典的层次化树状结构"
              >
                族谱关系图
              </button>
              
              <button
                onClick={() => setCurrentView('list')}
                className={getButtonClass('list')}
                aria-label="查看家族成员目录层级"
                title="按世代层级展示家族成员列表"
              >
                目录层级
              </button>
              <button
                onClick={() => setCurrentView('table')}
                className={getButtonClass('table')}
                aria-label="查看家族成员表格展示"
                title="表格形式展示所有家族成员信息"
              >
                表格展示
              </button>
            </nav>
          </div>
        </div>
      </header>

      {/* 主要内容 */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6" role="main">
        <section className="bg-white rounded-lg shadow-sm min-h-[600px]" aria-label="族谱管理主要功能区域">
          {renderCurrentView()}
        </section>
        
        {/* SEO内容区域 */}
        <section className="mt-8 bg-white rounded-lg shadow-sm p-6" aria-labelledby="seo-content">
          <h2 id="seo-content" className="text-2xl font-bold text-gray-800 mb-4">
            专业的在线族谱管理系统
          </h2>
          <div className="grid md:grid-cols-2 gap-6 text-gray-600">
            <div>
              <h3 className="text-lg font-semibold text-gray-700 mb-2">功能特色</h3>
              <ul className="space-y-2">
                <li>• <strong>可视化族谱制作</strong>：直观的家族关系图展示</li>
                <li>• <strong>多种展示方式</strong>：族谱关系图、列表、表格多种视图</li>
                <li>• <strong>详细信息管理</strong>：完整记录家族成员信息</li>
                <li>• <strong>PDF导出功能</strong>：支持高质量族谱文档导出</li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold text-gray-700 mb-2">适用场景</h3>
              <ul className="space-y-2">
                <li>• <strong>家族族谱编制</strong>：制作完整的家族世系图</li>
                <li>• <strong>宗族文化传承</strong>：数字化保存家族历史</li>
                <li>• <strong>家谱资料整理</strong>：系统化管理家族信息</li>
                <li>• <strong>世代关系梳理</strong>：清晰展示血缘关系</li>
              </ul>
            </div>
          </div>
          
          {/* 族谱关系图特色 */}
          <div className="mt-6">
            <div className="p-4 bg-purple-50 rounded-lg">
              <h4 className="font-semibold text-purple-800 mb-2">族谱关系图特色</h4>
              <ul className="text-sm text-purple-700 space-y-1">
                <li>• 经典层次化树形结构，清晰展示世代关系</li>
                <li>• 智能避免节点重叠，优化大型族谱显示</li>
                <li>• 支持超宽渲染，适应各种族谱规模</li>
                <li>• 优雅的视觉效果和箭头连线</li>
                <li>• 支持缩放、拖拽、全屏等交互功能</li>
                <li>• 详细信息面板，完整展示成员信息</li>
              </ul>
            </div>
          </div>
          
          <div className="mt-6 p-4 bg-green-50 rounded-lg">
            <p className="text-green-800">
              <strong>免费使用</strong>：本族谱管理系统完全免费，支持无限制添加家族成员，
              提供专业的可视化族谱关系图，帮助您轻松制作专业的家族族谱，传承珍贵的家族文化和历史。
            </p>
          </div>
        </section>
      </main>
      
      {/* 页脚 */}
      <footer className="bg-white border-t mt-12" role="contentinfo">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="text-center text-gray-600">
            <p className="mb-2">
              © 2024 族谱管理系统 - 专业的在线家族族谱制作工具
            </p>
            <p className="text-sm">
              关键词：族谱制作、家谱编辑、世系图生成、家族关系图、族谱管理、家族历史记录
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
}